<template>
  <el-card class="good-container">
    <template #header>
      <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="100px">
        <el-form-item label="订单编号">
          <el-input v-model="formInline.orderSn" placeholder="请输入订单编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formInline.time"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="defaultTime1"
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="header">
            <el-radio-group v-model="isMarketable" size="small" @change="changeMarke">
              <el-radio label='-1' border>全部商品</el-radio>
              <el-radio label='3' border>待发货</el-radio>
              <el-radio label='6' border>退款退货</el-radio>
            </el-radio-group>
            <el-button type="primary" @click="manyChange" class="mar" style="margin-left:70px;" plain>批量发货</el-button>
      </div>
    </template>
    <el-table
      v-loading="loading"
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column label="订单编号" prop="orderSn" header-align="center"></el-table-column>
      <el-table-column label="商品名称" prop="productName" header-align="center"></el-table-column>
      <el-table-column label="商品图片" width="120px">
        <template #default="scope">
          <img style="width: 100px; height: 100px;" :src="scope.row.productImg" alt="商品主图">
        </template>
      </el-table-column>
      <el-table-column label="收货人信息" align="center">
         <template #default="scope">
           <div class="p_height" >{{scope.row.shipName}}</div>
           <div class="p_height" >{{scope.row.shipAddress}}</div>
        </template>
      </el-table-column>
       <el-table-column label="团份数" prop="tuanMemberNum" width="120" align="center"></el-table-column>
       <el-table-column label="订单总金额" prop="intTotalPrice"  width="100" align="center"></el-table-column>
      <el-table-column label="订单状态" align="center">
         <template #default="scope">
            <div class="p_height" >{{scope.row.status}}</div>
        </template>
      </el-table-column>
     <el-table-column label="下单时间" prop="createTimes" align="center" width="160"></el-table-column>

      <el-table-column label="打印" width="100" align="center">
        <template #default="scope">
          <span style="color: #67C23A;" v-if="scope.row.id">打印</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130" align="center">
        <template #default="scope">       
          <el-popconfirm v-if="scope.row.id == '1111'" title="确定发货吗？" @confirm="handleStatus(scope.row.orderSn)">
            <template #reference>
             <a style="cursor: pointer; margin-right: 10px" >发货</a>
            </template>
          </el-popconfirm>
          <router-link :to="{ path: '/OrderDetail', query: { id: scope.row.orderSn }}">订单详情</router-link>
        </template>
      </el-table-column>
    </el-table>
    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="pageNum"
      @current-change="changePage"
    />
  </el-card>
  
</template>

<script>
import { onMounted, reactive, ref, toRefs } from 'vue'
import {getData} from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { inject } from 'vue'
import { getTimes} from '@/utils'
import { store } from '@/store'
export default {
  name: 'Evalation',
  setup() {
    const multipleTable = ref(null)
    const $filters = inject('$filters')
    const router = useRouter()
    const state = reactive({
      loading: false,
      busbaseId:store.getters.busId,
      adminId:store.getters.adminId,
      tableData: [], // 数据列表
      multipleSelection: [], // 选中项
      total: 0, // 总条数
      pageNum: 1, // 当前页
      pageSize: 10,// 分页大小
      formInline:{
        orderSn:"",
        state:'-1',
        time:'',
        startTime:'',
        endTime:'',
      },
      isMarketable:'-1',
      isAtate:'-1',
      defaultTime1: [new Date(2000, 1, 1, 12, 0, 0),],
      types:[
        {value:'-1',label:"全部"},
        {value:'0',label:"已评价"},
        {value:'1',label:"待付款"},
        {value:'2',label:"待成团"},
        {value:'3',label:"待发货"},
        {value:'4',label:"待收货|待提货"},
        {value:'5',label:"待评价"},
        {value:'6',label:"申请退款|退货"},
        {value:'7',label:"退款退货成功"},
      ],
    })
    
    onMounted(() => {
      getGoodList()
    })
    // 获取订单列表
    const getGoodList = () => {
      state.loading = true
      let params={
          adminId:state.adminId,
          busbaseId:state.busbaseId,
          orderSn:state.formInline.orderSn,
          state:state.isAtate,//订单状态：默认 -1全部 0已评价；1待付款、2待成团、3待发货 、4待收货|待提货、5待评价 6申请退款|退货7退款退货成功",
          startTime:state.formInline.startTime,
          endTime:state.formInline.endTime,
          pageNum: state.pageNum,
          pageSize: state.pageSize,
        }
       getData('/order/orderBus/getBusbaseOrderList',params).then(res=>{
                console.log(res.data,1)
                if(res.data.flag){
                  let dataArr=res.data.list||[];
                  for(let i=0;i<dataArr.length;i++){
                    dataArr[i].productImg=$filters.prefix(dataArr[i].productImg)
                    dataArr[i].intTotalPrice= dataArr[i].intTotalPrice/100
                 }
                  state.tableData = dataArr
                  state.total = res.data.total
                  state.pageNum = res.data.pageNum
                  state.loading = false
                }
            }) 
    }
     const onSubmit=()=>{//查询商品
       console.log(state.formInline)
        if(state.formInline.time){
          state.formInline.startTime=getTimes(state.formInline.time[0])
          state.formInline.endTime=getTimes(state.formInline.time[1])
        }else{
          state.formInline.startTime=''
          state.formInline.endTime=''
        }
        state.isAtate=state.formInline.state;
        getGoodList()
    }
    const changeMarke=(val)=>{//选择订单类型
       console.log(val)
       state.isAtate=val
       getGoodList()
    }
  const handleStatus = (id) => {//发货
     
    }
   const manyChange=()=>{//批量发货
     let ids=state.multipleSelection.join(",")
     getData('/order/orderBus/orderShip',{ adminId:state.adminId, busbaseId:state.busbaseId,ids}).then(res=>{
          console.log(res.data)
          if(res.data.flag){
              ElMessage.success({message:"操作成功",duration:1000})
              getGoodList()
          }
      }) 
   }
    // 选择项
    const handleSelectionChange = (val) => {
      console.log(val)
      state.multipleSelection=[];
      if(val.length>0){
        val.forEach(ele => {
          state.multipleSelection.push(ele.orderSn)
        });
      }
    }
    const changePage = (val) => {//换页
      state.pageNum = val
      getGoodList()
    }
    
    return {
      ...toRefs(state),
      multipleTable,
      onSubmit,
      handleSelectionChange,
      getGoodList,
      changePage,
      changeMarke,
      manyChange,
      handleStatus,
    }
  }
}
</script>

<style scoped>
  .good-container {min-height: 100%;}
  .p_height{line-height: 40px;}
  .p_mar{margin-right: 35px;}
  .header{padding-top: 20px;}
  .el-card.is-always-shadow {min-height: 100%!important;}
</style>